<template>

	<div style="width: 800px;text-align: center;display: inline-block;flex-wrap: wrap;">
		<div class="machine-list-card" v-for="item in myGoodsList">
			<div style="display: flex;width: 100%;">

				<div class="left">

					<div class="img">

						<router-link :to="{name:'indexcontent',query:{id:item.id}}"><img :src="item.img" style="width: 90%;"/></router-link>
					</div>
				</div>
				<div class="right">
					<div class="info-item">
						<div class="info-item-title">
							{{item.title}}
						</div>
					</div>
					<div class="info-item">

						<div class="info-item-title">
							{{item.describe}}
						</div>
					</div>
					<div class="info-item">
						<div class="info-item-title">
							¥{{item.price}}
						</div>

					</div>

				</div>
			</div>

		</div>

	</div>

</template>


<script>
	export default {
		components: {

		},

		data() {
			return {
				idRouterAlive: true,
				myGoodsList: [],
				mygoodtype:'',
			};
		},
		// inject: ['reload'],
		mounted() {
			console.log(222);
			this.mygetdata();
		},
		updated() {
			console.log(223);
			this.mygoodtype = this.$route.query.goodtype;//修改变量，触发监视器读取数据。
		},
		methods: {
			mygetdata() {
				// console.log(11)
				let myparams = {
					goodtype: this.$route.query.goodtype
				};
				console.log('myparams:', myparams);
				this.getdata('/system/goodtable/list?pageNum=1&pageSize=22', myparams).then(response => {
					this.myGoodsList.splice(0,this.myGoodsList.length);//清空数组

					for (var index in response.rows) {
						let newgood = {
							id: response.rows[index],
							img: "/a1.jpg",
							title: "测试",
							describe: "新产品",
							price: 121,
							num: 3,
							memo: '无'
						};

						response.rows[index].img = 'http://localhost/dev-api' + response.rows[index].img;
						newgood.id = response.rows[index].id;
						newgood.img = response.rows[index].img;
						newgood.title = response.rows[index].title;
						newgood.describe = response.rows[index].mydescribe;
						newgood.price = response.rows[index].price;
						newgood.num = response.rows[index].num;
						newgood.memo = response.rows[index].memo;
						this.myGoodsList.push(newgood);
					}

				}).catch((err) => {
					console.log('err')
				})
			},
			closed() {
				alert('我要关闭');

				// ElMessage.success('点击结算');
				//  this.$router.go(-1);
			},
			checkin() {

				// this.cartlist.splice(0,this.cartlist.length);
				alert('结算完成')

			},
		},

		//如果使用updated,系统会陷入死循环，所以改为用监测变量的方式。
		watch: {
			mygoodtype: async function() {
				this.mygetdata();
			}
		}
	};
</script>

<style scoped>
	.machine-list-card {
		/* width: 850px; */
		height: 100px;
		/* margin: 5px auto; */
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
		border-radius: 10px;
		box-shadow: 5px 5px 10px rgba(160, 160, 160, 0.3);
		margin-bottom: 10px;
		/* margin-right: 10px; */
	}

	.check1 {
		width: 80px;
		height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left {
		width: 80px;
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.right {
		min-width: 600px;
		width: 90%;
		height: 100px;
		padding: 20px;
		box-sizing: border-box;
		display: flex;
		/* flex-direction: column; */
		justify-content: space-around
	}

	.img {
		width: 80px;
		height: 80px;
	}

	.img image {
		width: 80px;
		height: 80px;
	}

	.info-item {
		display: flex;
		white-space: nowrap;
		display: inline-grid;
		align-content: center;

	}

	.info-item-title {
		font-size: 20px;
		text-align: justify;
		text-align-last: justify;
	}

	.info-item-content {
		margin-left: 10px;
		overflow: hidden;
	}
</style>
